<template>
    <div class="father-container">
        <h1> Father 组件</h1>
        <p>{{ sonMessage }}</p>
        <Son :msg="message" :user="userinfo" @sendMessage="getMessage"></Son>
    </div>
</template>

<script>
import Son from '@/components/Son.vue'
    export default {
        data() {
            return {
                message: 'hello vue.js',
                userinfo: {
                    username: 'zs',
                    age: 20
                }, 
                sonMessage:''
            }
        }, 
        components: {
            Son
        },
        methods: {
            // 收到子组件的消息
            getMessage(val) {
                this.sonMessage = val
            }
        }
    }
</script>

<style lang="less" scoped>
.father-container {
    background-color: pink;
    min-height: 200px;
}

</style>